<template>
  <div>
    <!-- 查询条件 -->
    <div style="margin: 20px; width: 1200px">
      <!-- 查询表单 -->
      <el-form :model="results" :inline="true" size="mini" ref="results" label-width="100px" style="width: 1261px">
        <el-form-item label="供应商名称">
          <el-input v-model.trim="results.supplierName"></el-input>
        </el-form-item>
        <el-form-item label="我方签订人">
          <el-input v-model.trim="results.signPartyA"></el-input>
        </el-form-item>
        <el-form-item label="对方签订人">
          <el-input v-model.trim="results.signPartyB"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" prop="originalSetOffTime" style="width: 323px">
          <el-date-picker type="date" value-format="yyyy-MM-dd HH:mm:ss" v-model.trim="results.startTime" size="mini"
            placeholder="开始时间前">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="originalSetOffTime" style="width: 223px">
          <el-date-picker type="date" value-format="yyyy-MM-dd HH:mm:ss" v-model.trim="results.startTimeBack"
            size="mini" placeholder="开始时间后">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="originalSetOffTime" style="width: 323px">
          <el-date-picker type="date" value-format="yyyy-MM-dd HH:mm:ss" v-model.trim="results.endTime" size="mini"
            placeholder="结束时间前">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="originalSetOffTime" style="width: 223px">
          <el-date-picker type="date" value-format="yyyy-MM-dd HH:mm:ss" v-model.trim="results.endTimeBack" size="mini"
            placeholder="结束时间后">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同状态" prop="originalSetOffTime">
          <el-radio v-model="results.contractStatus" label="0">禁用</el-radio>
          <el-radio v-model="results.contractStatus" label="1">启用</el-radio>
        </el-form-item>
        <div style="margin-top: 20; margin-left: 45%">
          <el-form-item>
            <el-button type="primary" @click="editAndAddMaterial()">新增</el-button>
            <el-button type="primary" @click="viewContract">查询</el-button>
            <el-button type="primary" @click="resetContract">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 列表 -->
    <el-table size="mini" style="width: 95%; margin: 15px" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" id="tableTop" :data="ContractList" border stripe>
      <el-table-column label="序号" prop="contractId"></el-table-column>
      <el-table-column label="合同编号" prop="contractNum"> </el-table-column>
      <el-table-column label="供应商名称" prop="name"></el-table-column>
      <el-table-column label="我方签约人" prop="signPartyA"></el-table-column>
      <el-table-column label="对方签约人" prop="signPartyB"></el-table-column>
      <el-table-column label="开始日期" prop="startTime"></el-table-column>
      <el-table-column label="结束日期" prop="endTime"></el-table-column>
      <el-table-column label="状态" prop="contractStatus">
        <template slot-scope="scope">
          <template v-if="scope.row.contractStatus=='0'">禁用</template>
          <template v-if="scope.row.contractStatus=='1'">启用</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="createTime">
        <template slot-scope="scope">
          <div style="display: inline-block">
            <el-button style="background-color: #6090ec; color: #fff" size="mini"
              @click="editAndAddMaterial(scope.row)">修改</el-button>
          </div>
          <div style="display: inline-block" v-if="scope.row.contractStatus == 0">
            <el-button style="background-color: #6090ec; color: #fff" size="mini" @click="activeContract(scope.row)">启用
            </el-button>
          </div>
          <div style="display: inline-block" v-if="scope.row.contractStatus == 1">
            <el-button style="background-color: #6090ec; color: #fff" size="mini" @click="activeContract(scope.row)">禁用
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 新增/编辑  -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="1200px" :close-on-click-modal="false">
      <el-form :label-position="labelPosition" :inline="true" class="demo-form-inline" :model="addform" :rules="rules"
        ref="addform" style="border-bottom: 1px solid #ccc; width: 1172px">
        <el-form-item label="合同编号" prop="contractNum">
          <el-input size="mini" v-model="addform.contractNum"></el-input>
        </el-form-item>
        <el-form-item>
          <p style="display: flex">
            <span style="
                display: inline-block;
                width: 115px;
                text-align: right;
                margin-right: 10px;
              ">合同商名称</span>
            <el-select clearable placeholder="供应商名称" prop="supplierId" allow-create="" size="mini"
              v-model="addform.supplierId" @change="handler1($event)">
              <el-option v-for="c2 in supplierType" :key="c2.supplierId" :label="c2.supplierName"
                :value="c2.supplierId"></el-option>
            </el-select>
          </p>
        </el-form-item>
        <el-form-item label="合作商地址" prop="address">
          <el-input size="mini" v-model="addform.address"></el-input>
        </el-form-item>
        <el-form-item label="合作商电话" prop="phone">
          <el-input size="mini" v-model="addform.phone"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker type="date" value-format="yyyy-MM-dd HH:mm:ss" v-model.trim="addform.startDate" size="mini"
            placeholder="开始时间前">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker type="date" value-format="yyyy-MM-dd HH:mm:ss" v-model.trim="addform.endDate" size="mini"
            placeholder="开始时间前">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="我方签约人" prop="signPartyA">
          <el-input size="mini" v-model="addform.signPartyA"></el-input>
        </el-form-item>
        <el-form-item label="我方联系人电话" prop="phonePartyA">
          <el-input size="mini" v-model="addform.phonePartyA"></el-input>
        </el-form-item>
        <el-form-item label="我方商务联系人" prop="businessPartyA">
          <el-input size="mini" v-model="addform.businessPartyA"></el-input>
        </el-form-item>
        <el-form-item label="对方签约人" prop="signPartyB">
          <el-input size="mini" v-model="addform.signPartyB"></el-input>
        </el-form-item>
        <el-form-item label="对方联系人电话" prop="phonePartyB">
          <el-input size="mini" v-model="addform.phonePartyB"></el-input>
        </el-form-item>
        <el-form-item label="对方商务联系人" prop="businessPartyB">
          <el-input size="mini" v-model="addform.businessPartyB"></el-input>
        </el-form-item>
        <el-form-item label="我方部署名义" prop="companyPartyA">
          <!-- <el-input size="mini" v-model="addform.companyPartyA"></el-input> -->
          <el-select size="mini" v-model="addform.companyPartyA" placeholder="请选择" clearable>
            <el-option v-for="item in myypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同状态" prop="contractStatus">
          <el-radio-group v-model="addform.contractStatus">
            <el-radio label="0">禁用</el-radio>
            <el-radio label="1">启用</el-radio>
          </el-radio-group>
        </el-form-item>
        <div style="text-align: center">
          <!-- <el-form-item label="合同附件" prop="sipUser"> </el-form-item> -->
          <el-form-item>
            <el-upload class="upload-demo" action="/file/fileMapping/contractUpload"
              :on-preview="handlePictureCardPreview" :on-success="successpickcherone" :headers="headers" ref="upload">
              <el-button size="small" type="primary">点击上传合同附件</el-button>
            </el-upload>
            合同附件列表
            <el-table size="mini" style="width: 95%;" :header-cell-style="{
                color: '#fff',
                background: '#6090EC',
                fontSize: '11px',
                fontWeight: 'normal',
              }" id="tableTop" :data="lstContractDocuments" border stripe>
              <el-table-column label="名称" prop="travelContractDocumentName" width="200px">
              </el-table-column>
              <el-table-column prop="image" label="图片" min-width="200px">
                <template slot-scope="scope">
                  <img :src="scope.row.travelContractDocumentUrl" width="130px" height="130px" />
                </template>
              </el-table-column>
              <el-table-column label="操作" prop="createTime" width="150px">
                <template slot-scope="scope">
                  <el-button style="background-color: #6090ec; color: #fff" size="mini"
                    @click="delContractDocument(scope.row)">
                    删除
                  </el-button>
                  <el-button style="background-color: #6090ec; color: #fff" size="mini"
                    @click="downContractDocument(scope.row)">
                    下载
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="cancelContract()">返 回</el-button>
        <el-button type="primary" @click="saveContract('addform')">保 存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        total: 0,
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        // 我方签署名义
        myypeList: [{
            value: "1",
            label: "去玩吧",
          },
          {
            value: "2",
            label: "股份",
          },
          {
            value: "3",
            label: "逸程",
          },
        ],
        labelPosition: "left",
        supplierType: [],
        lstContractDocuments: [],
        //上传合同附件数组
        results: {}, //查询表单的对象
        ContractList: [], //表格绑定的数组
        fileList: [],
        addform: {
          contractNum: "",
          address: "",
          phone: "",
          startDate: "",
          endDate: "",
          signPartyA: "",
          phonePartyA: "",
          businessPartyA: "",
          signPartyB: "",
          phonePartyB: "",
          businessPartyB: "",
          companyPartyA: "",
          contractStatus: "",
          supplierName: "",
        }, //新增/编辑绑定的变量
        supplierId: "1", //新增的主键
        rules: {
          contractNum: [{
            required: true,
            message: "请填写合同编号",
            trigger: "blur"
          }, ],
          supplierName: [{
            required: true,
            message: "请填写合同名称",
            trigger: "blur"
          }, ],
          address: [{
            required: true,
            message: "请填写合作商地址",
            trigger: "blur"
          }, ],
          phone: [{
            required: true,
            message: "请填写合作商电话",
            trigger: "blur"
          }, ],
          startDate: [{
            required: true,
            message: "请选择日期",
            trigger: "change"
          }, ],
          endDate: [{
            required: true,
            message: "请填写结束日期",
            trigger: "change"
          }, ],
          signPartyA: [{
            required: true,
            message: "请填写我方签约人",
            trigger: "blur"
          }, ],
          phonePartyA: [{
            required: true,
            message: "请填写我方联系人电话",
            trigger: "blur",
          }, ],
          businessPartyA: [{
            required: true,
            message: "请填写我方商务联系人",
            trigger: "blur",
          }, ],
          signPartyB: [{
            required: true,
            message: "请填写对方签约人",
            trigger: "blur"
          }, ],
          phonePartyB: [{
            required: true,
            message: "请填写对方联系人电话",
            trigger: "blur",
          }, ],
          businessPartyB: [{
            required: true,
            message: "请填写对方商务联系人",
            trigger: "blur",
          }, ],
          companyPartyA: [{
            required: true,
            message: "请填写我方部署名义",
            trigger: "blur"
          }, ],
          contractStatus: [{
            required: true,
            message: "请选择合同状态",
            trigger: "change"
          }, ],
          // sipUser: [
          //   { required: true, message: "请上传合同附件", trigger: "b" },
          // ],
        },
        dialogFormVisible: false, //绑定弹框
        isEdit: false, // 0表示编辑，1表示新增
        dialogTitle: "", //代表新增和删除的标题
        headers: {
          type: "workOrder",
        },
        list1: null, //供应商名称
      };
    },
    mounted() {
      this.contractList();
      //后台的供应商列表数据 单独接口
      this.gettravelSupplierVoList();
    },
    methods: {
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.contractList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.contractList();
      },
      activeContract(row) {
        console.log(row.contractStatus)
        if (row.contractStatus == "1") {
          row.contractStatus = "0";
        } else {
          row.contractStatus = "1";
        }
        this.$axios.addContract(row).then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              type: "success",
              message: "操作成功",
            });
          }
          this.dialogFormVisible = false; //关闭弹框
          this.contractList(); //成功之后再次刷新列表接口
        });
      },
      // 供应商列表
      gettravelSupplierVoList(reset) {
        console.log(reset, "reset");
        this.$axios
          .gettravelSupplierVoList({
            supplierName: this.supplierName,
          })
          .then((res) => {
            this.supplierType = res.data;
          });
      },
      handler1(value) {
        console.log(value);
        this.supplierId = value; //价格供应商的id传过去
      },
      handlePictureCardPreview(file) {
        console.log(file);
      },
      // 成功之后的接口
      successpickcherone(file) {
        for (let index = 0; index < file.data.length; index++) {
          this.lstContractDocuments.push({
            travelContractDocumentName: file.data[0].name,
            travelContractDocumentUrl: file.data[0].url,
          });
        }
      },
      delContractDocument(row) {
        for (let i = this.lstContractDocuments.length - 1; i >= 0; i--) {
          var doc = this.lstContractDocuments[i];
          if (doc.travelContractDocumentName == row.travelContractDocumentName) {
            this.lstContractDocuments.splice(i, 1);
          }
        }
      },
      downContractDocument(row) {
        var link = document.createElement("a");
        link.download = row.travelContractDocumentName;
        link.href = row.travelContractDocumentUrl;
        link.click();
      },
      // 列表数据
      contractList() {
        this.$axios
          .contractList({
            supplierName: this.results.supplierName,
            signPartyA: this.results.signPartyA,
            signPartyB: this.results.signPartyB,
            startTime: this.results.startTime,
            startTimeBack: this.results.startTimeBack,
            endTime: this.results.endTime,
            endTimeBack: this.results.endTimeBack,
            contractStatus: this.results.contractStatus,
          })
          .then((res) => {
            if (res.code == "200") {
              this.ContractList = res.data;
              this.total = res.total
              // this.$message({
              //   message: "编辑成功",
              //   type: "success",
              // });
            }
          });
      },

      // 查询
      viewContract() {
        this.contractList();
      },
      //重置
      resetContract() {
        this.results = this.$options.data().results; //清空表单 之后重新刷新数据
        this.contractList();
      },
      // 弹框返回按钮
      cancelContract() {
        this.dialogFormVisible = false; //点击返回弹框关闭
      },
      // 新增和编辑
      editAndAddMaterial(row) {
        if (row) {
          this.addform = row;
          this.isEdit = true; //f赋值为0 走编辑函数了
          this.dialogFormVisible = true;
          this.dialogTitle = "编辑";
          this.addform.startDate = row.startTime;
          this.addform.endDate = row.endTime;
          this.addform.supplierId = row.supplierId;
          this.lstContractDocuments = this.addform.lstContractDocuments;
          if (this.$refs.upload != undefined) {
            this.$refs.upload.clearFiles();
          }
        } else {
          console.log("111");
          this.dialogTitle = "新增";
          this.isEdit = false;
          this.dialogFormVisible = true;
          this.addform = {};
          this.lstContractDocuments = [];
        }
      },
      // 保存按钮
      saveContract(value) {
        console.log(value);
        // let {
        // } = 
        // this.addform={
        //   contractNum,
        //   address,
        //   phone,
        //   startDate,
        //   endDate,
        //   signPartyA,
        //   phonePartyA,
        //   businessPartyA,
        //   signPartyB,
        //   phonePartyB,
        //   businessPartyB,
        //   companyPartyA,
        //   contractStatus,
        //   supplierName,
        // }
        console.log(this.addform)
        this.$refs[value].validate((valid) => {
          if (valid) {
            if (this.isEdit == false) {
              // 这个是入参
              this.$axios
                .addContract({
                  supplierId: this.supplierId,
                  contractNum: this.addform.contractNum,
                  address: this.addform.address,
                  phone: this.addform.phone,
                  startDate: this.addform.startDate,
                  endDate: this.addform.endDate,
                  signPartyA: this.addform.signPartyA,
                  phonePartyA: this.addform.phonePartyA,
                  businessPartyA: this.addform.businessPartyA,
                  signPartyB: this.addform.signPartyB,
                  phonePartyB: this.addform.phonePartyB,
                  businessPartyB: this.addform.businessPartyB,
                  companyPartyA: this.addform.companyPartyA,
                  contractStatus: this.addform.contractStatus,
                  supplierName: this.addform.supplierName,
                  lstContractDocuments: this.lstContractDocuments,
                })
                .then((res) => {
                  console.log(res);
                  if (res.code == "200") {
                    this.$message({
                      type: "success",
                      message: "添加成功",
                    });
                  }
                  this.dialogFormVisible = false; //关闭弹框
                  this.contractList(); //成功之后再次刷新列表接口
                });
            } else {
              console.log("调用编辑接口");
              this.$axios.addContract(this.addform).then((res) => {
                console.log(res);
                if (res.code == "200") {
                  this.$message({
                    type: "success",
                    message: "编辑成功",
                  });
                }
                this.dialogFormVisible = false; //关闭弹框
                this.contractList(); //成功之后再次刷新列表接口
              });
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    },
  };
</script>

<style scoped>
  /* .demo-form-inline .el-input {
  width: 250px;
} */
  .el-date-editor .el-input__inner {
    width: 199px;
  }

  .demo-form-inline .el-form-item__label {
    width: 122px;
    margin-right: 4px;
  }
</style>